<template>
  <div class="vhMain">
    <TitleComponent title="岗位信息" />
    <div class="mainInfo">
      <div class="lastInfo">
        <div class="lastInfo">
          <!-- 岗位信息 -->

          <div class="title_line">
            <div class="title_img">
              <img src="@/assets//images/post.png" alt="" />
            </div>
            <p class="title">岗位信息</p>
          </div>
          <div></div>
          <el-form
            :model="form"
            label-width="auto"
            label-position="top"
            ref="formRef"
            :rules="rules"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="岗位名称:" prop="jobName">
                  <el-input
                    placeholder="请输入岗位名称"
                    maxlength="50"
                    v-model="form.jobName"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职级:" prop="positionLevel">
                  <el-input
                    placeholder="请输入职级"
                    v-model="form.positionLevel"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="薪资范围:" prop="salaryRange">
                  <SalaryRange v-model="form.salaryRange" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位状态:" prop="jobStatus">
                  <el-select
                    v-model="form.jobStatus"
                    placeholder="请选择岗位状态"
                    clearable
                  >
                    <el-option
                      v-for="dict in sys_normal_disable"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- // /** 签订竞业协议：0是 1否*/
// private Integer isCompetition;
// /** 签订保密协议：0是 1否*/
// private Integer isConfidential; -->

            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="签订竞业协议:" prop="isCompetition">
                  <el-select v-model="form.isCompetition" clearable>
                    <el-option
                      v-for="dict in sys_whether_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="签订保密协议:" prop="isConfidential">
                  <el-select v-model="form.isConfidential" clearable>
                    <el-option
                      v-for="dict in sys_whether_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="岗位性质:" prop="jobNature">
              <el-select
                v-model="form.jobNature"
                placeholder="请选择岗位性质"
                clearable
              >
                <el-option
                  v-for="dict in sys_job_nature"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="岗位职责:" prop="jobResponsibilities">
              <el-input
                placeholder="请输入岗位职责"
                maxlength="2000"
                v-model="form.jobResponsibilities"
                rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="任职条件:" prop="qualification">
              <el-input
                placeholder="请输入任职条件"
                maxlength="2000"
                v-model="form.qualification"
                rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="岗位关键词:" prop="jobKeywords">
              <el-input
                placeholder="请输入岗位关键词"
                maxlength="2000"
                v-model="form.jobKeywords"
                rows="4"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="岗位信息描述文件:" prop="file">
              <Upload
                v-model="form.file"
                :isShowTip="false"
                :fileType="fileType"
                :fileSize="50"
                @update:modelValue="uploadFiles"
                @delete="handleFileDelete"
              ></Upload>
            </el-form-item>
          </el-form>
          <div class="btns">
            <div class="back-btn">
              <el-button type="primary" @click="handleSubmit"
                >提交岗位</el-button
              >
              <el-button class="btn-css" @click="handleSave">保存</el-button>
              <el-button class="btn-css" @click="$GoBack()">关闭</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import Upload from "@/components/FileUpload/index.vue";
import SalaryRange from "@/components/SalaryRange/index.vue";
import { reactive, onMounted, ref } from "vue";
import { saveOrUpdate } from "@/api/JobInformationApi";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");
const { sys_job_nature, sys_whether_type } = proxy.useDict(
  "sys_job_nature",
  "sys_whether_type"
);
// 子组件引用

// 岗位信息库弹窗
const form = reactive({
  jobName: "",
  positionLevel: "",
  salaryRange: "",
  jobStatus: undefined,
  jobNature: undefined,
  jobResponsibilities: "",
  qualification: "",
  jobKeywords: "",
  file: "",
  isCompetition: "1",
  isConfidential: "1",
});

const rules = {
  jobName: [{ required: true, message: "请输入岗位名称", trigger: "blur" }],
  salaryRange: [
    { required: true, message: "请输入薪资范围", trigger: "change" },
  ],
  jobStatus: [{ required: true, message: "请选择岗位状态", trigger: "change" }],
  jobNature: [{ required: true, message: "请选择岗位性质", trigger: "change" }],
  jobResponsibilities: [
    { required: true, message: "请输入岗位职责", trigger: "blur" },
  ],
  qualification: [
    { required: true, message: "请输入任职条件", trigger: "blur" },
  ],
  jobKeywords: [
    { required: true, message: "请输入岗位关键词", trigger: "blur" },
  ],
};

const formRef = ref(null);

const validateFun = async (type) => {
  if (!formRef.value) return;
  await formRef.value.validate((valid) => {
    if (valid) {
      if (type === "提交") {
        // TODO: 调用提交接口

        form.isSubmit = 1;
        saveOrUpdate(form).then((res) => {
          console.log(res, "res");
          ElMessage.success("提交成功");
          router.go(-1);
        });
      } else {
        form.isSubmit = 0;
        saveOrUpdate(form).then((res) => {
          ElMessage.success("保存成功");
          console.log(res, "res");
          router.go(-1);
        });
        // TODO: 调用保存接口
      }
    } else {
      ElMessage.error("请填写必填项");
      return false;
    }
  });
};

const fileType = ref([
  "doc",
  "xls",
  "ppt",
  "txt",
  "pdf",
  "docx",
  "xlsx",
  "pptx",
]);

onMounted(() => {});

// 附件
const uploadFiles = (files) => {
  form.file = files;
};
const handleFileDelete = (updatedFiles) => {
  // userInfoForm.saveTransferFileVos=updatedFiles;
  form.file = updatedFiles;
};

const handleSave = async () => {
  validateFun("保存");
};
// 通过
const handleSubmit = () => {
  validateFun("提交");
};
</script>

<style lang="scss" scoped>
.vhMain {
  width: 100%;
  background: #fff;
  overflow: auto;

  border-radius: 10px;

  .mainInfo {
    width: 60%;
    padding: 16px;
  }
}
</style>
